<template>
  <a-modal
    :visible="visible"
    :width="900"
    :mask-closable="false"
    :footer="false"
    @cancel="handleModalCancel"
  >
    <template #title>
      <span>查看详情</span>
    </template>
    <!-- <a-descriptions :data="props.data" title="" bordered column="2">
    </a-descriptions> -->

    <a-descriptions :data="props.data" bordered column="2">
      <template v-for="item of props.data" :key="item.dataIndex">
        <template v-if="item.value">
          <a-descriptions-item :label="item.title" :span="item.span || 1">
            <span v-if="!item.slot">
              {{ item.value }}
            </span>
            <a-image
              v-if="item.dataIndex === 'avatar'"
              :src="item.value"
              width="100"
            />
          </a-descriptions-item>
        </template>
      </template>
    </a-descriptions>
  </a-modal>
</template>

<script setup>
  const props = defineProps({
    visible: Boolean,
    data: {
      type: Object,
      default: () => ({}),
    },
  });

  const emits = defineEmits(['success', 'close']);
  const handleModalCancel = () => {
    return emits && emits('close');
  };
</script>

<style lang="less" scoped>
  .strDiv {
    display: inline-block;
    margin: 20px 0;
  }
  .form {
    width: 800px;
    margin: 0 auto;
  }
</style>
